<!--
    Copyright (c) 2020 Contributors to the Eclipse Foundation

    See the NOTICE file(s) distributed with this work for additional
    information regarding copyright ownership.

    This program and the accompanying materials are made available under the
    terms of the Eclipse Public License 2.0 which is available at
    http://www.eclipse.org/legal/epl-2.0

    SPDX-License-Identifier: EPL-2.0
 -->
<template>
  <div style="height: 100%; position: relative">
    <div v-if="!selectedFile" style="height: 100%">
      <div style="height: 40px; margin-bottom: 5px; margin-top: 10px;">
        <el-input style="margin-bottom: 10px;" size="mini" v-model="searchInput"
                  @keyup.enter.native="doSearch"
                  :placeholder="$t('jifa.typeKeyWord')" clearable/>
      </div>
      <div style="position: absolute; top: 50px; left: 0; right: 0; bottom: 80px;">
        <el-table :data="candidateFiles"
                  :highlight-current-row="false"
                  stripe
                  :header-cell-style="headerCellStyle"
                  :cell-style='fileViewCellStyle'
                  row-key="rowKey"
                  lazy
                  height="100%"
                  v-loading="fileViewLoading"
        >
          <el-table-column label="File Name ( Please double click to choose a file as a heap baseline )" prop="name"
                           show-overflow-tooltip>
            <template slot-scope="scope">
            <span style="cursor: pointer" @dblclick="doCompare(scope.row.finalName)">
              <i class="el-icon-document"></i> {{scope.row.originalName}}
            </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="position: absolute; left: 0; right: 0; bottom: 0; height: 80px">
        <el-row type="flex" justify="space-around" style="margin-top: 15px">
          <el-col :span="8">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="fileViewPage"
                    :page-size="pageSize"
                    :total="candidateFileTotalSize"
                    @current-change="handleFileViewCurrentChange"
                    :hide-on-single-page=false
                    align="center">
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>

    <div v-else style="height: 100%">
      <div style="margin-bottom: 6px; height: 50px">
        <el-button size="mini" icon="el-icon-back" @click="reselect" circle></el-button>
        <span style='margin-left: 10px; font-size: 15px; font-weight: normal;
                   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
                   color: #606266;
                  '>
          <i class="el-icon-document"></i> {{selectedFile}}
        </span>
      </div>

      <div style="position: absolute; top: 50px; left: 0; right: 0; bottom: 0;">
        <el-table :data="tableData"
                  :highlight-current-row="false"
                  stripe
                  :header-cell-style="headerCellStyle"
                  :cell-style='cellStyle'
                  row-key="rowKey"
                  lazy
                  :indent=8
                  height="100%"
                  v-loading="loading"
        >
          <el-table-column label="Class Name" width="800px" show-overflow-tooltip="">
            <template slot-scope="scope">
          <span v-if="scope.row.isRecord">
            <img :src="classIcon"/> {{scope.row.className}}
          </span>
              <span v-if="scope.row.isSummary">
            <img :src="sumIcon" v-if="records.length >= summary.totalSize"/>
            <img :src="sumPlusIcon" @dblclick="fetchRecords" style="cursor: pointer" v-else/>
            {{ records.length }} <strong> / </strong> {{summary.totalSize}}
          </span>
            </template>
          </el-table-column>

          <el-table-column label="Objects">
            <template slot-scope="scope">
              {{ scope.row.objects > 0 ? '+' : '' }} {{ scope.row.objects}}
            </template>
          </el-table-column>

          <el-table-column label="Shallow Heap">
            <template slot-scope="scope">
              {{ scope.row.shallowHeap> 0 ? '+' : '' }} {{ scope.row.shallowHeap}}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import {heapDumpService} from '../../util'

  let rowKey = 1
  export default {
    props: ['file'],
    methods: {
      fetchCompareSummary() {
        this.loading = true
        axios.get(heapDumpService(this.file, 'compare/summary'), {
          params: {
            baseline: this.selectedFile
          }
        }).then(resp => {
          this.summary = resp.data
          if (this.summary.totalSize > 0) {
            this.fetchRecords()
          } else {
            this.loading = false
          }
        })
      },
      fetchRecords() {
        this.loading = true
        axios.get(heapDumpService(this.file, 'compare/records'), {
          params: {
            page: this.nextPage,
            pageSize: this.pageSize,
            baseline: this.selectedFile
          }
        }).then(resp => {
          let records = resp.data.data
          records.forEach(record => this.records.push({
            rowKey: rowKey++,
            className: record.className,
            objects: record.objects,
            shallowHeap: record.shallowSize,
            isRecord: true,
          }))

          this.tableData = this.records.concat({
            rowKey: rowKey++,
            objects: this.summary.objects,
            shallowHeap: this.summary.shallowSize,
            isSummary: true
          })

          this.nextPage++
          this.loading = false
        })
      },
      doCompare(fileName) {
        this.selectedFile = fileName
        this.fetchCompareSummary()
      },
      reselect() {
        this.selectedFile = null
        this.summary = null
        this.records = []
        this.tableData = []
        this.nextPage = 1
      },
      doSearch() {
        this.expectedFile = this.searchInput
        this.fileViewPage = 1
        this.fetchFiles(this.fileViewPage)
      },
      handleFileViewCurrentChange(page) {
        this.fetchFiles(page)
      },
      fetchFiles(page) {
        this.fileViewLoading = true
        axios.get(heapDumpService(this.file, 'compare/files'), {
          params: {
            page: page,
            pageSize: this.pageSize,
            expected: this.expectedFile,
          }
        }).then(resp => {
          this.candidateFileTotalSize = resp.data.totalSize
          this.candidateFiles = resp.data.data
          this.fileViewLoading = false
        })
      }
    },
    data() {
      return {
        fileViewCellStyle: {padding: '8px', fontSize: '15px'},
        cellStyle: {padding: '4px', fontSize: '12px'},
        headerCellStyle: {padding: 0, 'font-size': '12px', 'font-weight': 'normal'},
        pageSize: 25,

        fileViewPage: 1,
        fileViewLoading: false,
        searchInput: null,
        expectedFile: null,
        candidateFiles: [],
        candidateFileTotalSize: 0,


        selectedFile: null,
        classIcon: require('../../assets/heap/objects/class.gif'),
        sumIcon: require('../../assets/heap/misc/sum.gif'),
        sumPlusIcon: require('../../assets/heap/misc/sum_plus.gif'),
        loading: false,
        summary: null,
        nextPage: 1,
        records: [],
        tableData: [],
      }
    },
    created() {
      this.fetchFiles(this.fileViewPage)
    }
  }
</script>
